<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <title>aha-rust</title>
        <link rel="stylesheet" href="../static/css/styles.css">
        <link rel="icon" href="../static/images/favicon.ico" type="image/x-icon"> <!-- 添加网站图标 -->

        <script>
            document.addEventListener("DOMContentLoaded", function() {
                const pages = document.querySelectorAll('.page');
                const navLinks = document.querySelectorAll('.nav-link');

                navLinks.forEach(link => {
                    link.addEventListener('click', function(event) {
                        event.preventDefault();
                        const targetPage = this.getAttribute('href').replace('#', '');
                        pages.forEach(page => {
                            page.style.display = 'none';
                        });
                        document.getElementById(targetPage).style.display = 'block';
                    });
                });

                // 添加暗夜模式切换功能
                const themeToggle = document.getElementById('theme-toggle');
                themeToggle.addEventListener('click', function() {
                    document.body.classList.toggle('dark-mode');
                });
            });
        </script>
    </head>
    <body>

        <!-- 添加顶部导航栏 -->
        <div class="navbar">
            <div class="nav-left">
                <a href="#about" class="nav-link">关于</a>
                <a href="#experiment" class="nav-link">实验</a>
                <a href="#message_board" class="nav-link">留言版</a>
            </div>
            <div class="nav-right">
                <button id="theme-toggle">切换模式</button>
                <a href="#login" class="avatar nav-link">
                    <img src="../static/images/default-avatar.png" alt="用户头像">
                </a>
            </div>
        </div>

        <div id="about" style="display: block"  class="content page">
            <h1>关于</h1>
            <p>欢迎来到关于页面。</p>
        </div>

        <div id="experiment" style="display: none" class="content page">
            <h1>实验</h1>
            <p>欢迎来到实验页面。</p>
        </div>

        <div id="message_board" style="display: none" class="content page">
            <h1>留言版</h1>
            <p>欢迎来到留言版页面。</p>

            <!-- 添加留言表单 -->
            <form id="message-form"  action="/message" method="post" accept-charset="UTF-8">
                <label for="message">留言:</label><br>
                <textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br>
                <input type="submit" value="提交">
            </form>

            <div id="messages">
                <ul>
                    <wu-for form-data="messages">
                        <li>
                            {{ message }}  :  {{ name }} : {{ date }} IP属地: {{ province }}:{{ city }}
                        </li>
                    </wu-for>
                </ul>
            </div>
        </div>

        <div id="login" style="display: none"  class="content page">
            <h1>登录</h1>
            <p>欢迎来到登录页面。</p>
            <p>
                gitee登录：
                <a href="https://gitee.com/oauth/authorize?client_id=b9791c72cab5064926ced23043e0753e273315e47d1644c04a09a1aca8db7c51&redirect_uri=http%3A%2F%2Fwujianming.xyz&response_type=code&scope=user_info">Click here</a> to begin!
            </p>
        </div>
    </body>
</html>